var map //地图
var SX;// she
var SY;//she
var GX = 2; //苹果的位置
var GY = 2; //苹果的位置
var context;
var timer = null;
var Xstep = 0; //蛇的前进方向
var Ystep = 1; //蛇的前进方向
const SIDELEN = 25; //总体布局大小
const MARGIN = 5; //总体布局大小
const CORLOR = {
    "0": "#AD9D8F", //地面
    "1": "#EEE4DA", //蛇头
    "2": "#EEE32A", //蛇身
    "3": "#F67C5F" //食物
}

export default {
    data: {
        score: 0,
        isshow: false
    },
    onInit() {
        this.score=0;
        this.initMap();
        Xstep = 0;
        Ystep = 1;
        GX = 2;
        GY = 2;
        clearInterval(timer);
        this.isshow=false;
    },
    onReady() {
        context = this.$refs.canvas.getContext('2d');
    },
    onShow() {
        timer = setInterval(this.run,500);
        this.draw();
    },
    initMap() {
        map = [[2, 0, 0, 0, 0, 0, 0, 0, 0, 0],
               [1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
               [0, 0, 3, 0, 0, 0, 0, 0, 0, 0],
               [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
               [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
               [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
               [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
               [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
               [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
               [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];
        SX = [0, 0];
        SY = [1, 0];
    },
    draw() {
        for (let i = 0;i < 10; i++) {
            for (let j = 0;j < 10; j++) {
                let gridStr = map[i][j].toString();
                let leftTopX = j * (MARGIN + SIDELEN) + MARGIN;
                let leftTopY = i * (MARGIN + SIDELEN) + MARGIN;
                context.fillStyle = CORLOR[gridStr];
                context.fillRect(leftTopX,leftTopY,SIDELEN,SIDELEN);
            }
        }
    },
    makeGrids() {
    },
    run() {
        this.changeDirection;
        if (this.OutorNot()) {
            map = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                   [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];

            //蛇身前进
            for (let i = SX.length - 1; i > 0; i--) {
                SX[i] = SX[i - 1];
                SY[i] = SY[i - 1];
            }
            for (let i = 1;i < SX.length; i++) {
                map[SY[i]][SX[i]] = 2;
            }
            //让蛇头前进
            SX[0] += Xstep;
            SY[0] += Ystep;
            map[SY[0]][SX[0]] = 1;

            map[GY][GX] = 3;
            //在空白的地方随机生成食物
            if(!this.eatSelf()){
                if(SX[0]==GX&&SY[0]==GY){
                    SX.push(GX);
                    SY.push(GX);
                    let array=[];
                    for(let i=0;i<10;i++){
                        for(let j=0;j<10;j++){
                            if(map[i][j]==0){
                                array.push([i,j]);
                            }
                        }
                    }
                    let XandY = array[Math.floor(Math.random()*array.length)];
                    GX=XandY[0];
                    GY=XandY[1];
                }
                this.draw();
            }
        }
    },
    OutorNot() {
        //判断是否出界
        if (SX[0] < 0 || SX[0] > 9 || SY[0] < 0 || SY[0] > 9) {
            clearInterval(timer);
            this.isshow = true;
            return false;
        }
        return true;
    },
    eatSelf(){
        for(let i=1;i<SX.length;i++){
            if(SX[0]==SX[i]&&SY[0]==SY[i]){
                clearInterval(timer);
                this.isshow = true;
                return true;
            }
        }
        return false;
    },
    Eat() {
        if(SX[0]==GX&&SY[0]==GY){
            this.updateScore();
            let array=[];
            for(let i=0;i<10;i++){
                for(let j=0;j<10;j++){
                    if(map[i][j]==0){
                        array.push([i,j]);
                    }
                }
            }
            let XandY = array[Math.floor(Math.random()*array.length)];
            GX=XandY[0];
            GY=XandY[1];
        }
    },
    changeDirection(event) {

        if (event.direction == "right" ) {
            Xstep = 1;
            Ystep = 0;

        }

        if (event.direction == "left" ) {
            Xstep = -1;
            Ystep = 0

        }
        if (event.direction == "up" ) {
            Xstep = 0;
            Ystep = -1;


        }
        if (event.direction == "down" ) {
            Xstep = 0;
            Ystep = 1;

        }
    },
    reStart(){
        this.onInit();
        this.onReady();
        this.onShow();
    },
    updateScore(){
        this.score++;
    }
}